<template name="lgb-goods-list">
    <view class="lgb-goods-list">
        <view class="goods-list-item" v-for="(item, index) in list" :key="index">
            <view class="goods-img">
                <image class="img" :src="item.img"></image>
                <view class="tips">
                    <view class="follow">关注人数：{{item.follow}}</view>
                </view>
            </view>
            <view class="goods-name">
                {{item.name}}
            </view>
            <view class="goods-weight">
                {{item.weight}}
            </view>
            <view class="first-row">
                <view class="begin-time time-item">
                    开团时间：{{item.begin_time}}
                </view>
                <view class="sale-info time-item">
                    已售<span class="saled-num">{{item.saled}}</span>份/限量{{item.stock}}份            
                </view>
            </view>
            <view class="get-time time-item">
                提货时间：{{item.get_time}}
            </view>
            <view class="last-row">
                <view class="price">
                    <span class="goods-price">{{item.price}}</span>
                    <span class="market-price">{{item.market_price}}</span>
                </view>
                <button class="botton join-cart">加入购物车</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "lgb-goods-list",
        props: {
            list: {
                type: Array,
                default: () => []
            },
        },
        mounted() {

        },
        data() {
            return {
                
            };
        },
        methods: {

        }
    }       
</script>

<style lang="scss">
    .lgb-goods-list {
        width: 100%;
        margin: 0;
        padding: 0;
        .goods-list-item {
            padding: 20upx 20upx 12upx 20upx;
            background-color: #fff;
            margin-bottom: 14upx;
            box-sizing: border-box;
            .goods-img {
                position: relative;
                height: 380upx;
                width: 100%;
                .img {
                    display: block;
                    width: 100%;
                    height: 380upx;
                }
                .tips {
                    position: absolute;
                    left: 0;
                    top: 0;
                    min-width: 180upx;
                    background-position: center;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    padding: 8upx 10upx;
                    line-height: 28upx;
                    box-sizing: border-box; 
                    background-image: url('');
                    .follow {
                        display:url('');
                        font-size: 18upx;
                        color: #fff;
                        padding-right: 30upx;
                        box-sizing: border-box;
                    }
                }
            }
            .goods-name {
                font-size: 26upx;
                color: #1A1A1A;
                word-break: break-all;
                margin-top: 16upx;
            }
            .goods-weight {
                font-size: 20upx;
                color: #808080;
                line-height: 48upx;
                border-bottom: 1upx solid #E6E6E6;
                margin-bottom: 8upx;
                box-sizing: border-box;             
            }
            .time-item {
                font-size: 22upx;
                color: #e60013;
                line-height: 36upx;
                overflow: hidden;                
            }
            .first-row {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-between;
                .begin-time {
                    
                }
                .sale-info {
                    
                }                
            }
            .get-time {
                
            }
            .last-row {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-between; 
                .price {
                    .goods-price {
                        font-size: 28upx;
                        color: #e60013;                    
                    }  
                    .market-price {
                        font-size: 20upx;
                        color: #808080;
                        margin-left: 10upx;
                        padding-right: 6upx; 
                        text-decoration: line-through
                    }
                }     
                .botton {
                    background-color: #fff;
                    font-size: 20upx;
                    color: #808080;
                    text-align: center;
                    min-width: 148upx;
                    height: 52upx;
                    line-height: 48upx;
                    border: 1px solid #808080;
                    border-radius: 400upx;
                    box-sizing: border-box; 
                    margin: 0;
                    padding: 0;
                }                                  
                .join-cart {
                    color: #e60013;
                    border-color: #e60013;                   
                }                
            }
        }
    }
</style>
